<template>
  <el-dialog  :title="'支付密码'" v-model="dialog.openCheck"  width="400"  @opened="openDialog"   append-to-body  @close="closeTxDialog">
    <div>
          <el-form :model="mdyForm"  :rules="mdyRules"  ref="dialogRef"  label-suffix=":">
            <el-form-item label="支付密码" prop="password">
              <el-input v-model="mdyForm.password" placeholder="请输入支付密码" type="password" />
            </el-form-item>
          </el-form>
    </div>
    <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeTxDialog">取 消</el-button>
            <el-button type="primary" :loading="mdyLoading" @click="mdySubmit">确 定</el-button>
          </div>
        </template>

    </el-dialog>
</template>

<script  setup name="billSerCheckDetail" lang="ts">
  import {billDetail,billSubDetail} from "@/api/settle/paybatch";
  const pros = defineProps(['title','openCheck','id','txItem']);
  const emit = defineEmits(['dialogClose', 'dialogSubmit','flushDetail'])

  const { proxy } = getCurrentInstance() as ComponentInternalInstance;

  const mdyForm = ref({
     password:"",

  });


 const mdyLoading = ref(false)

 const setCheckTitle = (title:string)=>{

 }
 const mdyRules = ref({
    password: [{ required: true, message: "请输入支付密码", trigger: "blur" }]
});

  const dialog = ref({
     title:'',
     openCheck:false
  })

  const loading = ref(false)
  const item = ref({});
  const dialogRef  = ref();
  const queryParams = ref({
    pageSize:10,
    pageNum:1

  });
  const total = ref(0);
  const operList = ref([]);
  const logList = ref([]);
  const logTableRef = ref();

  item.value = pros.txItem;
  dialog.value.openCheck = pros.openCheck;
  const openDialog = ()=>{
    dialog.value.openCheck = pros.openCheck;
  }


const setCheckValue = ()=>{
    mdyForm.value.password = null;
    mdyLoading.value = false;
    closeTxDialog();

}





  const closeTxDialog =()=>{
      mdyLoading.value = false;
      dialog.value.openCheck = false;
      emit('dialogClose',{tag:1});

 }


 const mdySubmit = ()=>{
    dialogRef.value?.validate(async (valid: boolean) => {
      if (valid) {
         mdyLoading.value = true;
          emit('dialogSubmit', {
            password:mdyForm.value.password
          })
      }})
  }


  watch(() => pros.openCheck, async val => {
         dialog.value.openCheck =  val;
    });


  watch(() => pros.txItem, async val => {
      item.value = pros.txItem;
    });

  defineExpose({setCheckValue,setCheckTitle})
</script>

<style>

  .el-dialog__header{
    border-bottom: 1px solid #e8e8e8;
    padding-bottom:15px;
    margin-right:0;
  }

  .el-dialog__footer{
     border-top: 1px solid #e8e8e8;
  }


  .tx-tips{
      background: #f5f5f5;
      padding: 15px;
      display: flex;
      justify-self: flex-start;
      align-items: center;
  }

  .tx-tips img{
    width: 30px;
    height:30px;
  }

  .content{
        border: 1px solid #1890ff;
        margin-top: 30px;
  }

  .content-title{
        border-bottom: 1px solid #1890ff;
        padding: 15px 0;
        text-align: center;
        font-size: 20px;
        font-weight: 700;
  }


  .el-row:after, .el-row:before {
      display: table;
      content: "";
  }

</style>
